<template>
  <div class="f-all">
    <div class="f-zi">
       <span class="el-icon-arrow-left" style="font-size=15px,font-weight=600 " @click="tiaoHou()"></span>&nbsp;设置权限</div>
    <div class="f-table">
      <!-- 搜索框 -->
      <div class="f-one">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formInline">
          <el-form-item label="权限名称:">
            <el-input v-model="formInline.jurisdiction_name" placeholder="角色名"></el-input>
          </el-form-item>
          <el-form-item label="所属模块:">
            <el-select v-model="formInline.super_id" placeholder="全部">
              <el-option
                v-for="item in tableData.build_jurisdictions"
                :key="item.role_state"
                :label="item.super_id"
                :value="item.super_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="权限状态:">
            <el-select v-model="formInline.jurisdiction_state" placeholder="全部">
              <el-option label="开启" value="0"></el-option>
              <el-option label="禁用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="权限等级:">
            <el-select v-model="formInline.jurisdiction_level" placeholder="全部">
              <el-option label="管理员权限" value="1"></el-option>
              <el-option label="其他权限" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="submitForm('formInline')" type="success" plain>查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="f-two">
        <el-table
          ref="multipleTable"
          border
          :data="currList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
        >
          <el-table-column
            prop="build_jurisdictions[0].jurisdiction_name"
            label="权限名称"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
          <el-table-column
            prop="build_jurisdictions[0].jurisdiction_url"
            label="权限路径"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
          <el-table-column
            prop="build_jurisdictions[0].jurisdiction_level"
            label="权限等级"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
          <el-table-column label="权限角色状态" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              <!-- <el-form :inline="true" :model="submit" class="demo-form-inline"> -->
              <!-- <el-form-item> -->
              <el-select
                v-model="scope.row.role_jurisdiction_state"
                placeholder="全部"
                @change="RoleInput(scope.row)"
                class="selectInput"
                :disabled="scope.row.role_id=='1'?true:false"
              >
                <el-option label="开启" value="0"></el-option>
                <el-option label="禁用" value="1"></el-option>
              </el-select>
              <!-- </el-form-item> -->
              <!-- </el-form> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="f-block">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="tableData.length"
          :page-size="pageSize"
          @current-change="changePage"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import http from "../api";

export default {
  data() {
    return {
      submit: {
        role_jurisdiction_state: "",
        role_id: "",
        jurisdiction_id: "",
      },
      Params: this.$route.params,
      formInline: {
        role_id: "",
        jurisdiction_name: "",
        super_id: "",
        jurisdiction_state: "",
        jurisdiction_level: "",
      },
      tableData: [],
      finput: [],

      currPage: 1, //当前页
      currList: [], //当前展示的数据数组
      pageSize: 7,
      newData: [],
    };
  },
  methods: {
        // 返回
     tiaoHou() {
      this.$router.push({
        name: "角色管理",
      });
    },
    // 查询
    submitForm(formName) {
      console.log(this.Params.role_id);

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formInline.role_id = this.Params.role_id;
          http.findBuildJurisdictions(this.formInline).then((r) => {
            console.log("查询后", r);
            this.tableData = r.data;
            this.setCurrList(1);
            // this.formInline=''
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 表格内容改变
    RoleInput(row) {
      console.log("333", row);
      this.submit.role_id = this.Params.role_id;
      this.submit.jurisdiction_id = row.jurisdiction_id;
      this.submit.role_jurisdiction_state = row.role_jurisdiction_state;
      http.updBuildJurisdictions(this.submit).then((r) => {
        // http
        //   .findBuildJurisdictions({ role_id: this.Params.role_id })
        //   .then((r) => {
        //     this.tableData = r.data;
        //     this.setCurrList(1);
        //     console.log("权限table", this.tableData);
        //   });
        // console.log("返回", r);
      });
    },
    // 分页
    setCurrList(index) {
      console.log("当前页", index);
      // console.log(this.currPage.length)
      this.currList = this.tableData.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
    },
    changePage(val) {
      this.currPage = val;
      this.setCurrList(val);

      console.log(val);
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
      console.log(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.log(val);
    },

    handleSelectionChange(val) {
      // this.multipleSelection = val;
      this.chuan = val;
      // console.log(val)
      console.log(this.chuan);
    },
  },
  mounted() {
    // console.log("这是", this.Params);
    
    http.findBuildJurisdictions({ role_id: this.Params.role_id }).then((r) => {
      if (r.code == 2) {
        alert("权限不足");
      } else {
        this.tableData = r.data;
        this.setCurrList(1);
        console.log("权限table", this.tableData);
      }
    });
  },
};
</script>
<style scoped>
.selectInput >>> .el-input__inner {
  width: 100px;
}
.f-all {
  margin-top: 15px;
  width: 100%;
  height: 645px;
  background-color: white;
  overflow-y: scroll;
}
.f-zi {
  margin-top: 20px;
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-left: 15px;
}
.f-table {
  margin-left: 15px;
  margin-top: 10px;
  width: 97%;
}
.f-one {
  width: 100%;
  /* background-color: wheat; */
  display: flex;
}
.f-block {
  margin-left: 80%;
  margin-top: 15px;
}
/* 小图标 */
.el-icon-arrow-left {
  cursor: pointer;
}
.el-input >>> .el-input__inner {
  width: 185px;
  height: 30px;
  /* margin-top: -20px; */
  padding-left: 5px;
  /* margin-left: 5px; */
}
.el-select >>> .el-input__inner {
  /* width: 185px; */
  height: 30px;
  padding-left: 5px;
  /* margin-left: 5px; */
}
.el-button {
  height: 32px;
  padding: 5px 10px;
  /* background-color: rgba(68, 83, 199, 0.7); */
  border: cadetblue;

  /* color: white; */
}
</style>